<!DOCTYPE html>
<html>
<head>
    <title>电子书商城</title>
</head>
<body class="bgf6">

<style>
    .explain_box {
        padding: 8px 0 0 5px;
        border-top: 1px dashed #dbdbdb;
    }
</style>

<div th:include="common/boAtmHeader :: atmHeader"></div>

<div class="main-body pb100">
    <div class="container pt10">
        <div class="dflx sbt">

            <div class="body-right" id="app">
                <div class="bread-nav bgff">
                    <ul class="dflx">

                    </ul>
                </div>

                <div class="bgff mt10 pb20 edit-mode">
                    <div class="wrap">

                        <el-tabs type="card" v-model="selTab" @tab-click="handleClick">
                            <el-tab-pane label="全部" name="first">
                                <el-table
                                        :data="orders"
                                        style="width: 100%">
                                    <el-table-column
                                            prop="orderId"
                                            label="订单ID"
                                            width="80">
                                    </el-table-column>
                                    <el-table-column
                                            prop="name"
                                            label="商品信息"
                                            width="380">
                                        <template slot-scope="scope">
                                            <el-row v-for="commodity in scope.row.childs">
                                                <el-col :span="6">
                                                    <div class="grid-content">
                                                        <img :src="commodity.picUrl" style="width: 80px;height: 80px">
                                                    </div>
                                                </el-col>
                                                <el-col :span="6">
                                                    <div class="grid-content">
                                                        {{commodity.commoName}}
                                                    </div>
                                                </el-col>
                                                <el-col :span="6">
                                                    <div class="grid-content">
                                                        {{commodity.buyNum}}
                                                    </div>
                                                </el-col>
                                                <el-col :span="6">
                                                    <div class="grid-content">
                                                        {{commodity.price}}￥
                                                    </div>
                                                </el-col>
                                            </el-row>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            width="180"
                                            prop="address"
                                            label="收货地址">
                                    </el-table-column>
                                    <el-table-column
                                            width="180"
                                            prop="createTime"
                                            label="创建时间">
                                    </el-table-column>
                                    <el-table-column
                                            prop="statusValue"
                                            label="状态">
                                    </el-table-column>
                                </el-table>
                            </el-tab-pane>
                            <el-tab-pane label="待付款" name="second"><el-table
                                    :data="orders"
                                    style="width: 100%">
                                <el-table-column
                                        prop="orderId"
                                        label="订单ID"
                                        width="80">
                                </el-table-column>
                                <el-table-column
                                        prop="name"
                                        label="商品信息"
                                        width="380">
                                    <template slot-scope="scope">
                                        <el-row v-for="commodity in scope.row.childs">
                                            <el-col :span="6">
                                                <div class="grid-content">
                                                    <img :src="commodity.picUrl" style="width: 80px;height: 80px">
                                                </div>
                                            </el-col>
                                            <el-col :span="6">
                                                <div class="grid-content">
                                                    {{commodity.commoName}}
                                                </div>
                                            </el-col>
                                            <el-col :span="6">
                                                <div class="grid-content">
                                                    {{commodity.buyNum}}
                                                </div>
                                            </el-col>
                                            <el-col :span="6">
                                                <div class="grid-content">
                                                    {{commodity.price}}￥
                                                </div>
                                            </el-col>
                                        </el-row>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        width="180"
                                        prop="address"
                                        label="收货地址">
                                </el-table-column>
                                <el-table-column
                                        width="180"
                                        prop="createTime"
                                        label="创建时间">
                                </el-table-column>
                                <el-table-column
                                        prop="statusValue"
                                        label="状态">
                                </el-table-column>
                            </el-table></el-tab-pane>
                            <el-tab-pane label="已完成" name="third">
                                <el-table
                                        :data="orders"
                                        style="width: 100%">
                                    <el-table-column
                                            prop="orderId"
                                            label="订单ID"
                                            width="80">
                                    </el-table-column>
                                    <el-table-column
                                            prop="name"
                                            label="商品信息"
                                            width="380">
                                        <template slot-scope="scope">
                                            <el-row v-for="commodity in scope.row.childs">
                                                <el-col :span="6">
                                                    <div class="grid-content">
                                                        <img :src="commodity.picUrl" style="width: 80px;height: 80px">
                                                    </div>
                                                </el-col>
                                                <el-col :span="6">
                                                    <div class="grid-content">
                                                        {{commodity.commoName}}
                                                    </div>
                                                </el-col>
                                                <el-col :span="6">
                                                    <div class="grid-content">
                                                        {{commodity.buyNum}}
                                                    </div>
                                                </el-col>
                                                <el-col :span="6">
                                                    <div class="grid-content">
                                                        {{commodity.price}}￥
                                                    </div>
                                                </el-col>
                                            </el-row>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            width="180"
                                            prop="address"
                                            label="收货地址">
                                    </el-table-column>
                                    <el-table-column
                                            width="180"
                                            prop="createTime"
                                            label="创建时间">
                                    </el-table-column>
                                    <el-table-column
                                            prop="statusValue"
                                            label="状态">
                                    </el-table-column>
                                </el-table>
                            </el-tab-pane>
                            <el-tab-pane label="已取消" name="fourth"><el-table
                                    :data="orders"
                                    style="width: 100%">
                                <el-table-column
                                        prop="orderId"
                                        label="订单ID"
                                        width="80">
                                </el-table-column>
                                <el-table-column
                                        prop="name"
                                        label="商品信息"
                                        width="380">
                                    <template slot-scope="scope">
                                        <el-row v-for="commodity in scope.row.childs">
                                            <el-col :span="6">
                                                <div class="grid-content">
                                                    <img :src="commodity.picUrl" style="width: 80px;height: 80px">
                                                </div>
                                            </el-col>
                                            <el-col :span="6">
                                                <div class="grid-content">
                                                    {{commodity.commoName}}
                                                </div>
                                            </el-col>
                                            <el-col :span="6">
                                                <div class="grid-content">
                                                    {{commodity.buyNum}}
                                                </div>
                                            </el-col>
                                            <el-col :span="6">
                                                <div class="grid-content">
                                                    {{commodity.price}}￥
                                                </div>
                                            </el-col>
                                        </el-row>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        width="180"
                                        prop="address"
                                        label="收货地址">
                                </el-table-column>
                                <el-table-column
                                        width="180"
                                        prop="createTime"
                                        label="创建时间">
                                </el-table-column>
                                <el-table-column
                                        prop="statusValue"
                                        label="状态">
                                </el-table-column>
                            </el-table></el-tab-pane>
                        </el-tabs>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<script type="text/javascript">

    var ebookVue = new Vue({
        el : '#app',
        data : {
            orders : {},
            selTab : 'first'
        },
        created : function () {
            loadOrders(0);
        },
        methods : {
            handleClick : function (tab, event) {
                console.log(tab)
                loadOrders(tab.index);
            }

        }
    });

    function loadOrders(status) {
        dayuanit.ajax('/order/loadMyOrder', {
            status : status
        }, function (result) {
            ebookVue.orders = result.data;
        })
    }

</script>

</body>
</html>
